<template>
  <div>
    <a-card :bordered="false">
         <div style="font-size:16px;color:#333;font-weight:500;margin-bottom:10px">
            种植投入品相关资质
        </div>
        <a-form-model ref="ruleForm" :rules="rules" :model="photoForm">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="种植投入品相关资质" prop="imgUrls">
              <j-image-upload-custom  
               :uploadSize="5" 
               :maxLength="10"
                text="上传照片"
                v-model="photoForm.imgUrls"
                :isMultiple="true"
                tip="最多上传10张，只支持.jpg/.png格式，文件大小小于5M"
                ></j-image-upload-custom>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
            <a-button type="primary" style="margin-bottom: 0; float: left" @click="onSubmit"
            >确定</a-button
            >
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <div style="margin-top:20px">
    <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <HeardLayout>
        <template v-slot:left>
            <div style="font-size:16px;color:#333;font-weight:500">
            最新农事活动记录
            </div>
        </template>
        <template v-slot:right>
            <div>
            <SwitchBar :type="3" :default-state.sync="switchStatus" />
            </div>
        </template>
        </HeardLayout>
        <!-- 操作按钮区域 -->
        <div class="table-operator" v-if="!switchStatus">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <!-- table区域-begin -->
        <div>
        <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            row-key="id"
            :columns="calcolumns"
            :data-source="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange"
        >
            <template slot="htmlSlot" slot-scope="text">
            <div v-html="text" />
            </template>
            <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img
                v-else
                :src="getImgView(text)"
                height="25px"
                alt=""
                style="max-width: 80px; font-size: 12px; font-style: italic"
            />
            </template>
            <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
                下载
            </a-button>
            </template>
            <template slot="executionStartTime" slot-scope="text, record">
              <span>{{ record.executionStartTime+' ~ '+record.executionEndTime}}</span>
            </template>
            <span v-if="!switchStatus" slot="action" slot-scope="text, record">
            <a @click="handleDetails(record)">查看</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="$delete(handleDelete, record.id)">删除</a>
            </span>
        </a-table>
        </div>
        <farmingDo-modal ref="modalForm" @ok="modalFormOk"></farmingDo-modal>
    </a-card>
    </div>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import farmingDoModal from './modal/farmingDoModal.vue'
  import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  import YearSelect from '@/components/jeecg/YearDateSelect.vue'
  import HeardLayout from './components/HeardLayout'
  import SwitchBar from './components/SwitchBar'
  import JImageUploadCustom from '@/components/jeecg/JImageUploadCustom'
  import {dpEditActivitiesImg,dpAddActivitiesImg} from '@/api/dashboardPaltform'
  export default {
    name: 'farmingDoList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      YearSelect,
      JDictSelectTag,
      farmingDoModal,
      HeardLayout,
      SwitchBar,
      JImageUploadCustom
    },
    data () {
      return {
        photoForm:{
          imgUrls:'',
        },
        form:{},
        switchStatus: false,
        createTime:[],
        positionList:[],
        description: '农事实施情况',
        // 表头
         columns: [
            { title: '执行时间', dataIndex: 'executionStartTime', scopedSlots: { customRender: 'executionStartTime' }},
            { title: '任务名称', dataIndex: 'taskName'},
            { title: '所属果园', dataIndex: 'orchardName' },
             {
            title: '操作',
            dataIndex: 'action',
            align: 'left',
            fixed: 'right',
            width: 147,
            scopedSlots: { customRender: 'action' },
            },
        ],  
        dataSource:[],
        isorter:{
        },
        url: {
          img:'/loquat/tqppAgriculturalActivitiesImg/queryAgriculturalActivitiesImg',
          list: "/loquat/tqppAgriculturalActivities/list",
          delete: "/loquat/tqppAgriculturalActivities/delete",
        },
        dictOptions:{},
      }
    },
     computed: {
        calcolumns() {
        if (this.switchStatus && this.columns.length > 0) {
            return this.columns.slice(0, this.columns.length - 1)
        } else {
            return this.columns
        }
        },
        importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        },
    },
    watch: {
        // switchStatus(val) {
        // this.loadData()
        // },
    },
    mounted() {
      this.getinfo()
    },
    methods: {
        async dpAddActivitiesImg() {
        let res 
        if(this.photoForm.id){
         res = await dpEditActivitiesImg(this.photoForm)
        }else{
         res = await dpAddActivitiesImg(this.photoForm) 
        }
        if(res.success){
            this.$message.success(res.message)
            this.getinfo()
        }else{
            this.$message.error(res.message)
        }
    },
     async getinfo() {
      const res = await getAction(this.url.img)
      this.photoForm.id = res.result.id
      this.photoForm.imgUrls = res.result.imgUrls
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
            this.dpAddActivitiesImg()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
      loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.loading = true
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          if (this.dataSource.length > 0) {
            this.showEmpty = true
          } else {
            this.showEmpty = false
          }
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
        initDictConfig(){
        }
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
.table-page-search-wrapper{
/deep/ .ant-calendar-range-picker-input{
    font-size: 12px
  }
}
</style>